<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<!-- 状态栏占位 -->
		<view :style="{height:statusBarHeight+'px',background: '#fff'}"></view>
		<view class="custom-nav" :style="{height:navBarHeight+'px'}">
			<uni-icons type="left" size="26" class="icon" @click="backHome()"></uni-icons>
			<text>成为陪宠师</text>
		</view>
		<!-- #endif -->
		<view class="content">
			<image :src="url+'icon-04.png'" mode=""></image>
			<template v-if="recordDetail.payInfoReasonFlag">
				<view class="title">已提交</view>
				<view class="title">您还需要修改以下信息</view>
				<view class="table_box">
					<view class="table_item table_item_title">
						<view class="table_item_left">类型</view>
						<view class="table_item_center">意见</view>
						<view class="table_item_right">操作</view>
					</view>
					<view class="table_item">
						<view class="table_item_left">打款信息</view>
						<view class="table_item_center">{{recordDetail.applyStudioProgressVos[0].payInfoReason}}</view>
						<view class="table_item_right go_modify" @tap="againBtn">前去修改</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="title">已提交</view>
				<view class="tips">请耐心等候人员进行审核审核结果会以短信方式告知</view>
			</template>

			<view class="btn" @tap="backHome">{{recordDetail.payInfoReasonFlag ? '查看详情' :'返回首页'}}</view>
			<!-- <view class="xjs-size-26 xjs-text-center subcribTips" @click="getSubcrib">订阅消息通知</view> -->
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad, onBackPress } from '@dcloudio/uni-app';
	import { messageSubcrib } from '@/hooks/useMessageSubscrib'
	import { useStudioStoreToRefs } from "@/store/useStudioStore";
	let { applicationRecord } = useStudioStoreToRefs()
	import api from '@/api'
	const statusBarHeight = ref()
	const menuButtonInfo = ref()
	const navBarHeight = ref()
	const recordId = ref('')
	const recordDetail = ref({})
	onLoad(async (options) => {
		// #ifdef MP-WEIXIN
			statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
			menuButtonInfo.value = uni.getMenuButtonBoundingClientRect()
			//然后计算出navBarHeight
			navBarHeight.value = (menuButtonInfo.value.bottom - statusBarHeight.value) + (menuButtonInfo.value.top - statusBarHeight.value) //状态栏与胶囊按钮中的空隙
		// #endif
		
		if (options.id) {
			await getRecordDetail(options.id)
		}
		applicationRecord.value = true
	})
	const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')  //图片前缀
	const backHome = () => {
		if(recordDetail.value.payInfoReason) {
			uni.navigateTo({
				url: `/pages/myStudio/studio/applyForDetails/index?id=${recordDetail.id}&type=1`
			})
		} else {
			uni.switchTab({
				url: '/pages/home/index'
			})
		}
		
	}
	const getRecordDetail = async (recordId) => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/apply-studio-record/getApplyInfo/${recordId}`
		})
		recordDetail.value = res.data
	}
	
	const getSubcrib = () => {
		messageSubcrib('subscrib_03')
	}
	const againBtn = () => {
		uni.redirectTo({
			url: `/pages/myStudio/studio/offlinePayment/index?id=${recordDetail.value.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #FFFFFF;

		.custom-nav {
			display: flex;
			align-items: center;
			background-color: #fff;
			justify-content: center;
			position: relative;

			.icon {
				position: absolute;
				font-weight: bold;
				top: 14rpx;
				left: 16rpx;
				//margin-left: 16rpx;
			}

			text-align: center;
		}

		.content {
			padding-top: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			line-height: 1;

			image {
				margin-bottom: 64rpx;
				width: 96rpx;
				height: 96rpx;
			}

			.title {
				width: 686rpx;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.tips {
				margin-bottom: 10rpx;
				font-size: 28rpx;
				color: #5C5E5E;
			}

			.btn {
				padding: 30rpx 0;
				margin-top: 80rpx;
				width: 654rpx;
				background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
				border-radius: 44rpx;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
			}
		}

	}
	.table_box {
		width: 686rpx;
		border: 2rpx solid #E4E6E6;
		.table_item {
			display: flex;
			font-size: 26rpx;
			color: #5C5E5E;
			.table_item_left {
				padding: 32rpx 0;
				box-sizing: border-box;
				width: 20%;
				text-align: center;
			}
			.table_item_center {
				padding: 32rpx 0;
				box-sizing: border-box;
				width: 60%;
				border-left: 2rpx solid #E4E6E6;
				border-right: 2rpx solid #E4E6E6;
			}
			.table_item_right {
				padding: 32rpx 0;
				box-sizing: border-box;
				width: 20%;
			}
			.go_modify {
				color: #FF6084;
				padding: 32rpx 0;
				font-size: 26rpx;
				text-align: center;
				text {
					text-decoration: underline;
				}
			}
		}
		.table_item_title {
			border-bottom: 2rpx solid #E4E6E6;
			text-align: center;
			
		}
		
	}
	.failed_label_box {
		border: 1px solid #E4E6E6;
		margin: 0 32rpx;
		margin-top: 24rpx;
	}

	.failed_left_box {
		width: 8rpx;
		height: 24rpx;
		background: #FF6084;
		border-radius: 4rpx;
		margin-right: 4rpx;
	}

	.failed_one_label {
		// border-top: 1px solid #E4E6E6;
		border-bottom: 1px solid #E4E6E6;
		display: flex;
	}

	.failed_one_label_left {
		width: 458rpx;
		padding: 32rpx 0;
		font-size: 26rpx;
		color: #5C5E5E;
	}

	
</style>